<template>
  <div>
    <a-modal :title="`选择搭配${isVideo ? '视频': '图'}`" :visible="currentVisible" width="700px"
             @cancel="currentVisible = false" @ok="handleOk">
      <div class="img-list" id="imgList" v-if="currentImgList.length">
        <template v-if="!isVideo">
          <div class="img-item"  v-for="(item, index) in currentImgList" :key="index">
            <img :src="item.url" alt="" @click="handlePreview(item)">
            <a-button v-if="item.isChecked" @click="handleCheck(item)" type="link" icon="check">已选用</a-button>
            <a-button v-else  type="link" @click="handleCheck(item)" icon="plus">选用该图</a-button>
          </div>
        </template>
        <template v-if="isVideo">
          <div class="img-item" v-for="(item, index) in currentImgList" :key="index">
            <img src="https://picttype1.jnby.com/content/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220510134506.png" alt="" @click="handlePreview(item)">
            <a-button v-if="item.isChecked" @click="handleCheck(item)" type="link" icon="check">已选用</a-button>
            <a-button v-else  type="link" @click="handleCheck(item)" icon="plus">选用该视频</a-button>
          </div>
        </template>
      </div>
      <div class="ant-empty ant-empty-normal" v-else>
        <div class="ant-empty-image">
          <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
            <g transform="translate(0 1)" fill="none" fillRule="evenodd">
              <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
              <g fillRule="nonzero" stroke="#D9D9D9">
                <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
                <path
                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                  fill="#FAFAFA"
                ></path>
              </g>
            </g>
          </svg>
        </div>
        <p class="ant-empty-description">暂无数据</p>
      </div>
    </a-modal>
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
      <img v-if="!isVideo" alt="example" style="width: 100%" :src="previewImage"/>
      <video v-if="isVideo" width="100%" controls>
        <source :src="previewImage"  />
      </video>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: {
    isVideo: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    imgList: {
      type: Array,
      default: []
    },
    checkedImgList: {
      type: [Object, Array],
      default: () => {}
    },
    limit: {
      type: Number,
      default: 8
    },
  },
  components: {
  },
  data() {
    return {
      previewImage: '',
      previewVisible: false,
    }
  },
  watch: {
  },
  computed:{
    currentVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    currentImgList: {
      get () {
        return this.imgList
      },
      set (val) {
        this.$emit('update:imgList', val)
      }
    },
    currentCheckedImgList: {
      get () {
        return this.checkedImgList
      },
      set (val) {
        this.$emit('update:checkedImgList', val)
      }
    }

  },
  methods: {
    // 预览
    handlePreview(item) {
      this.previewImage = item.url || item.thumbUrl
      this.previewVisible = true
    },

    // 确定
    handleOk() {
      const checkedImgList = this.currentImgList.filter(e => e.isChecked)
      if (!checkedImgList.length) return
      this.$emit('ok', checkedImgList)
      this.currentVisible = false
      this.currentImgList.forEach(e => {
        e.isChecked = false
      })
    },

    // 选中/取消选中
    handleCheck(item) {
      if (!item.isChecked) {
        const addImgNum = this.currentImgList.filter(e => e.isChecked).length // 搭配图列表被选中的个数
        const oldImgNum = this.currentCheckedImgList.length // 已经存在图片的数量
        if ((addImgNum + oldImgNum) >= this.limit) {
          this.$message.info('图片数量已经上限了,请删除后再选择其他搭配图！')
          return
        }
        const currentCheckedImgList = this.currentCheckedImgList.map(e => e.url)
        if (currentCheckedImgList.includes(item.url)) {
          this.$message.info('该图已存在！')
          return
        }
        item.isChecked =!item.isChecked
      } else {
        item.isChecked =!item.isChecked
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .img-list{
    display: flex;
    flex-wrap: wrap;
    height: 400px;
    overflow: hidden;
    overflow-y: auto;
    .img-item{
      width: 20%;
      padding: 10px;
      img{
        display: block;
        width: 100%;
        height: 110px;
        object-fit: scale-down;
        cursor: pointer;
      }
    }
  }
</style>
